<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册 | 精品应用</title>
  <!-- Bootstrap 5 CSS -->
  <link href="../vandor/bootstrap-5.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome 图标库 -->
  <link rel="stylesheet" href="../vandor/font-awesome/css/all.min.css">
  <!-- Flatpickr 日期选择器 -->
  <link rel="stylesheet" href="../vandor/flatpickr/dist/flatpickr.min.css">
  <link rel="stylesheet" href="../css/register.css">
</head>
<body>
<!-- 顶部标题栏 -->
<div class="header">
  <div class="container">
    <div class="header-title">智能E生</div>
    <div class="header-subtitle">智能辅助问诊</div>
  </div>
</div>

<!-- 注册表单 -->
<div class="register-container">
  <div class="register-card">
    <h2 class="register-title">用户注册</h2>

    <form id="registerForm">
      <!-- 用户名 -->
      <div class="form-group">
        <label for="username" class="form-label">手机号码</label>
        <input type="text" class="form-control" id="username" placeholder="请输入手机号码" required>
        <div class="form-text">手机号码将用于登录和显示</div>
      </div>

      <!-- 密码 -->
      <div class="form-group">
        <label for="password" class="form-label">密码</label>
        <input type="password" class="form-control" id="password" placeholder="请输入密码(8-20位)" required>
        <i class="fas fa-eye input-icon toggle-password" data-target="password"></i>
        <div class="password-strength">
          <div class="strength-bar" id="passwordStrength"></div>
        </div>
        <div class="form-text">建议使用字母、数字和符号组合</div>
      </div>

      <!-- 确认密码 -->
      <div class="form-group">
        <label for="confirmPassword" class="form-label">确认密码</label>
        <input type="password" class="form-control" id="confirmPassword" placeholder="请再次输入密码" required>
        <i class="fas fa-eye input-icon toggle-password" data-target="confirmPassword"></i>
      </div>

<!--      &lt;!&ndash; 邀请码 &ndash;&gt;
      <div class="form-group">
        <label for="inviteCode" class="form-label">邀请码 <span class="text-muted">(选填)</span></label>
        <input type="text" class="form-control" id="inviteCode" placeholder="请输入邀请码">
      </div>-->

      <!-- 性别 -->
      <div class="form-group">
        <label class="form-label">性别</label>
        <div class="gender-group">
          <div class="gender-option">
            <input type="radio" id="male" name="gender" value="0" checked>
            <label for="male" class="gender-label">
              <i class="fas fa-male"></i> 男
            </label>
          </div>
          <div class="gender-option">
            <input type="radio" id="female" name="gender" value="1">
            <label for="female" class="gender-label">
              <i class="fas fa-female"></i> 女
            </label>
          </div>
        </div>
      </div>

      <!-- 出生日期 -->
      <div class="form-group">
        <label for="birthday" class="form-label">出生日期</label>
        <input type="text" class="form-control" id="birthday" placeholder="请选择出生日期" readonly required>
      </div>

      <button type="submit" class="btn btn-register">注 册</button>

      <div class="login-link">
        已有账号? <a href="login.html">立即登录</a>
      </div>
    </form>
  </div>
</div>

<div class="footer">
  © 2025 智能E生 · 版权所有
</div>

<!-- Bootstrap 5 JS Bundle with Popper -->
<script src="../vandor/bootstrap-5.3.7-dist/js/bootstrap.bundle.min.js"></script>
<!-- Flatpickr 日期选择器 -->
<script src="../vandor/flatpickr/"></script>
<script src="../vandor/flatpickr/dist/l10n/zh.js"></script>

<script>
  // 初始化日期选择器
  flatpickr("#birthday", {
    dateFormat: "Y-m-d",
    maxDate: "today",
    locale: "zh",
    defaultDate: "2000-01-01"
  });

  // 密码显示/隐藏切换
  document.querySelectorAll('.toggle-password').forEach(icon => {
    icon.addEventListener('click', function() {
      const targetId = this.getAttribute('data-target');
      const input = document.getElementById(targetId);
      const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
      input.setAttribute('type', type);
      this.classList.toggle('fa-eye');
      this.classList.toggle('fa-eye-slash');
    });
  });

  // 密码强度检测
  document.getElementById('password').addEventListener('input', function() {
    const password = this.value;
    const strengthBar = document.getElementById('passwordStrength');
    let strength = 0;

    if (password.length >= 8) strength += 1;
    if (password.match(/[a-z]/)) strength += 1;
    if (password.match(/[A-Z]/)) strength += 1;
    if (password.match(/[0-9]/)) strength += 1;
    if (password.match(/[^a-zA-Z0-9]/)) strength += 1;

    let width = 0;
    let color = '#dc3545'; // 红色

    if (strength <= 1) {
      width = 25;
      color = '#dc3545'; // 红色
    } else if (strength <= 3) {
      width = 50;
      color = '#fd7e14'; // 橙色
    } else if (strength <= 4) {
      width = 75;
      color = '#ffc107'; // 黄色
    } else {
      width = 100;
      color = '#28a745'; // 绿色
    }

    strengthBar.style.width = width + '%';
    strengthBar.style.backgroundColor = color;
  });

  // 表单提交验证
  document.getElementById('registerForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    const confirmPassword = document.getElementById('confirmPassword').value;
    const inviteCode = document.getElementById('inviteCode').value;
    const gender = document.querySelector('input[name="gender"]:checked').value;
    const birthday = document.getElementById('birthday').value;

    // 简单验证
    if (password !== confirmPassword) {
      alert('两次输入的密码不一致');
      return;
    }

    if (username.length < 4 || username.length > 16) {
      alert('用户名长度应在4-16位之间');
      return;
    }

    if (password.length < 8 || password.length > 20) {
      alert('密码长度应在8-20位之间');
      return;
    }

    // 这里应该是实际的注册逻辑
    fetch("/AiMedical/api/user/register",{
      method: "POST",
      headers:{
        "Content-Type":"application/json"
      },
      body:JSON.stringify({
        "phone":username,
        "password":password,
        "sex":gender,
        "birth":birthday
      }),
    }).then(
            response => response.json()
    ).then(data => {
      if(data.code == 0){
        alert(data.msg);
        setTimeout(() => {
          window.location.href = 'login.html';
        }, 1000);
      }else{
        alert("注册失败!" + data.msg);
      }
    }).catch(error => {
      console.error('注册失败:', error);
      alert("注册失败!")
    });

  });

  // 添加点击动画效果
  document.querySelector('.btn-register').addEventListener('mousedown', function() {
    this.style.transform = 'translateY(0) scale(0.98)';
  });

  document.querySelector('.btn-register').addEventListener('mouseup', function() {
    this.style.transform = 'translateY(-2px)';
  });
</script>
</body>
</html>